<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-22 01:23
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div v-if="isSelectedFormItem" key="formComps" style="overflow-x: hidden;padding: 5px;">
    <x-attrs-header
      url="https://www.antdv.com/components/form-model-cn/#API"
      title="表单项配置"
      @change="searchChangeHandler"
    />
    <a-skeleton active :paragraph="{rows:10}" :loading="!formShow">
      <x-render-form
        v-if="formShow"
        ref="xRenderItemCommonForm"
        v-model="formData"
        :form-options="formOptions"
        @change="formChangeHandler"
        @custom-event="customEventHandler"
      />
    </a-skeleton>
    <FormItemRules :visible.sync="rulesShow" @add-rule="addRuleHandler"></FormItemRules>
  </div>
  <div v-else key="formTip" class="form-item-placeholder" :style="{color:formErrorColor}">
    从左侧点选添加表单项
  </div>

</template>

<script>
import {cloneDeep} from 'lodash'
import XAttrsHeader from '../XDesignAttrsHeader/index'
import FormItemRules from '../XDesignFormItemRules/index'
import FormOptions from './options'

export default {
  name: 'XDesignFormItemCommon',
  inject: ['xDesignForm'],
  components: {
    XAttrsHeader,
    FormItemRules
  },
  data() {
    return {
      formShow: true,
      rulesShow: false
    }
  },
  computed: {
    formOptions: {
      get() {
        return cloneDeep(FormOptions)
      }
    },
    formErrorColor: {
      get() {
        const { xDesignForm } = this
        return xDesignForm.formPropsData.errorColor || '#409eff'
      }
    },
    isSelectedFormItem: {
      get() {
        const { xDesignForm } = this
        return !!xDesignForm.currentId
      }
    },
    formData: {
      get() {
        const { xDesignForm } = this
        const formOption = xDesignForm.getCurrentFormOption()
        return formOption.formItem
      },
      set(val) {
        const { xDesignForm } = this
        const formOption = xDesignForm.getCurrentFormOption()
        this.$set(formOption, 'formItem', val)
      }
    }
  },
  watch: {
    'xDesignForm.currentId': {
      immediate: true,
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.formShow = false
        })
        setTimeout(() => {
          this.$nextTick(() => {
            this.formShow = true
          })
        }, 500)
      }
    }
  },
  methods: {
    addRuleHandler(rule) {
      const { formData } = this
      let rules = formData.rules
      if (!rules) {
        rules = []
      }
      if (typeof (rules) === 'string') {
        rules = JSON.parse(rules)
      }
      if (!(rules instanceof Array)) {
        rules = []
      }
      if (rules.length === 0) {
        rules = [{
          required: true,
          trigger: 'blur',
          message: formData.label + '不能为空'
        }]
      }
      rules.push(rule)
      this.$set(formData, 'rules', JSON.stringify(rules))
    },
    formChangeHandler({ value, formItem }) {
    },
    searchChangeHandler(keyword) {
      const formOptions = cloneDeep(FormOptions)
      const showProps = []
      const hideProps = []
      for (const option of formOptions) {
        if (!option.formItem) {
          continue
        }
        const formItem = option.formItem
        if ((!!formItem.prop && formItem.prop.includes(keyword)) || (!!formItem.label && formItem.label.includes(keyword)) || (!!formItem.extra && formItem.extra.includes(keyword))) {
          showProps.push(formItem.prop)
        } else {
          hideProps.push(formItem.prop)
        }
      }
      this.$refs.xRenderItemCommonForm.showFields(...showProps)
      this.$refs.xRenderItemCommonForm.hideFields(...hideProps)
    },
    customEventHandler({ prop }) {
      if (prop === 'rules') {
        this.rulesShow = true
      }
    }
  }
}
</script>
<style lang="css" scoped>
.form-item-placeholder {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
</style>
